<template>
  <div class="dialog">
    <div class="loginPage">
      <h1>数据游戏登录</h1>
      <el-form>
        <el-form-item label="user">
          <el-input type="text" id="user" v-model="formName.user" @blur="inputBlur('user',formName.user)"></el-input>
          <p>{{formName.userError}}</p>
        </el-form-item>
        <el-form-item label="password">
          <el-input type="password" id="password" v-model="formName.password" @blur="inputBlur('password',formName.password)"></el-input>
          <p>{{formName.passwordError}}</p>
        </el-form-item>
        <el-button type="primary" @click="submitForm('formName')" style="width:100%" :loading="logining">
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
  export default {
    name: '',
    data() {
      return {
        logining: false,
        formName: { //表单中的参数
          user: '',
          userError: '',
          password: '',
          passwordError: '',
        },
        beShow: false //传值给父组件
      }
    },
    methods:{
      submitForm: function() {

        axios.post(
          '/api/login', {
            data: {
              username: this.formName.user,
              password:this.formName.password
            }
          })
          .then(res => res.data)
          .then(({code, msg, data}) => {
            alert(msg);
            if(code == 200){
              this.$router.push({
                path: '/dapp'
              })
            }
          })
          .catch(function (error) {
            alert(msg)
          });

      },
      inputBlur: function(errorItem, inputContent) {
        if(errorItem === 'user') {
          if(inputContent === '') {
            this.formName.userError = '用户名不能为空'
          } else {
            this.formName.userError = '';
          }
        } else if(errorItem === 'password') {
          if(inputContent === '') {
            this.formName.passwordError = '密码不能为空 '
          } else {
            this.formName.passwordError = '';
          }
        }
        //对于按钮的状态进行修改
        if(this.formName.user != '' && this.formName.password != '') {
          this.formName.beDisabled = false;
        } else {
          this.formName.beDisabled = true;
        }
      }
    }
  }
</script>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  .dialog {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
  }

  .loginPage {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -175px;
    width: 350px;
    min-height: 300px;
    padding: 30px 20px 20px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
  }

  .loginPage p {
    color: red;
    text-align: left;
  }
</style>
